<!--
*@Author: QWP
*@Description: 主要类型的按钮
*@Date: 2023-06-18 17:47:18
-->
<template>
  <Button
    size="meddle"
    :type="buttonType"
    :icon="getIcon"
    :ghost="$attrs['ghost'] || ghost"
    :danger="$attrs['danger'] || danger"
    v-bind="$attrs"
    class="u-common-icon-btn">
    <slot></slot>
  </Button>
</template>

<script lang="ts" setup>
import { computed, useAttrs, ref, h } from "vue";
import { createFromIconfontCN } from "@ant-design/icons-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import UIconFont from "@/components/common/iconfont/IconFont.vue";
import { Button } from "ant-design-vue";
defineOptions({
  name: "u-icon-button",
});

const attrs = useAttrs();

interface Props {
  itype?: string;
  type?: string;
}
const props = withDefaults(defineProps<Props>(), {
  type: "primary",
});

const IconFont = createFromIconfontCN({
  // scriptUrl: '../../../assets/iconfont/iconfont.js',
});

const danger = ref<boolean>(false);
const ghost = ref<boolean>(false);
const buttonType = ref<string>(props.type);
const getIcon = computed(() => {
  const icon: {
    [key: string]: string | any;
  } = {
    add: { icon: PlusOutlined, type: "primary" },
    edit: { icon: "icon-xiugai", type: "primary", iconColor: "#fff" },
    approve: { icon: "icon-a-pizhun1", type: "primary", iconColor: "#fff" },
    audit: { icon: "icon-shenhe", type: "primary", iconColor: "#fff" },
    sms: { icon: "icon-fasongduanxin", type: "primary", iconColor: "#fff" },
    chat: { icon: "icon-qunliao", type: "primary", iconColor: "#fff" },
    submit: { icon: "icon-tijiao", type: "primary", iconColor: "#fff" }, // 提交
    export: { icon: "icon-daochu", type: "primary", ghost: true },
    import: { icon: "icon-daoru", type: "primary", ghost: true },
    transmit: { icon: "icon-a-zhuanfa1", type: "primary", ghost: true }, // 转发
    save: { icon: "icon-a-baocun1", type: "primary", ghost: true },
    sort: { icon: "icon-guidang", type: "primary", ghost: true },
    print: { icon: "icon-dayin", type: "primary", ghost: true },
    filter: { icon: "icon-shaixuan", type: "primary", ghost: true }, // 筛选
    customCol: { icon: "icon-zidingyilie", type: "primary", ghost: true }, // 自定义列
    report: { icon: "icon-songshen", type: "primary", ghost: true }, // 上报、送审
    delete: { icon: "icon-a-shanchu1", danger: true, ghost: true },
    close: { icon: "icon-a-tuihui1", danger: true, ghost: true }, // 退回、取消、关闭
    recall: { icon: "icon-chexiao", type: "primary", ghost: true }, // 撤销
    view: { icon: "icon-chakan", type: "primary" }, // 查看
    record: { icon: "icon-liuchengjilu", type: "primary", ghost: true }, // 记录
    unlock: { icon: "icon-jiesuo", type: "primary", ghost: true }, // 解锁
    primary: { type: "primary" }, // 默认1
    primaryG: { type: "primary", ghost: true }, // 默认1
    dangerG: { danger: true, ghost: true },
    dismiss: { icon: "icon-jiechuyujing", type: "primary", ghost: true },
  };
  if (attrs.icon) {
    return attrs.icon.includes("icon-") ? h(UIconFont, { type: attrs.icon }) : attrs.icon;
  } else if (props.itype && icon[props.itype]) {
    let item = icon[props.itype];
    buttonType.value = item["type"];
    ghost.value = item["ghost"] || false;
    danger.value = item["danger"] || false;
    if (typeof item.icon == "string") {
      return h(UIconFont, { type: item.icon, style: { color: item.iconColor } });
    } else {
      return h(item.icon);
    }
  }
  return "";
});
</script>

<style lang="scss" scoped></style>
